<template>
  <view class="container">
    <view class="group-title">1.容器</view>
    <view class="component-item">view视图</view>

    
    <view class="group-title">2.基础内容</view>
    <view class="component-item">text文本编辑</view>
    <view class="component-item">icon图标</view>

    <view class="group-title">3.表单组件</view>
    <view class="component-item">button按钮</view>
    <view class="component-item">checkbox多选框</view>
    <view class="component-item">label标签组件</view>
    <view class="component-item">input输入框</view>
    <view class="component-item">textarea多行文本输入框</view>
    <view class="component-item">form表单</view>

    <view class="group-title">4.导航组件</view>
    <view class="component-item">navigator</view>

   
  </view>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {}
};
</script>

<style scoped>
.container {
  padding: 10px;
}
.group-title {
  background-color: #c3e6cb;
  padding: 8px;
  font-weight: bold;
  margin-top: 10px;
}
.component-item {
  padding: 6px;
  border-bottom: 1px solid #eee;
}
.bottom-tab {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 50px;
  border-top: 1px solid #ddd;
  margin-top: 20px;
}
.tab-item {
  text-align: center;
}
.tab-item.active {
  color: #007aff;
}
</style>